<template>
  <div class="fans-list">
    <van-pull-refresh v-model="isLoading"
                      success-text="刷新成功"
                      @refresh="onRefresh">
      <van-list v-model="loading"
                :finished="finished"
                :finished-text="finishedtext"
                @load="onLoad">
        <fans-item v-for="(val,i) in list" :key="i" :fandetail="val" @load="onRefresh"></fans-item>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import FansItem from './fans-item'
import { mapState } from 'vuex'
export default {
  name: 'Fans',
  components: {
    FansItem
  },
  props: {
    active: {
      type: Number,
      required: true
    },
    autorname: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      isLoading: false,
      list: [],
      loading: false,
      finished: false,
      others: {
        name: '未知用户',
        fans_count: 0,
        photo: 't0.jpg'
      }
    }
  },
  computed: {
    ...mapState(['autorInfo', 'autorlist', 'userInfo']),
    finishedtext () {
      return this.active === 0 ? '无法访问更多' : '你的关注列表只有这么多啦'
    }
  },
  methods: {
    onLoad () {
      // 当ative=0，1则为本人主页，2，3为其他人主页
      if (this.active === 0 || this.active === 2) {
        setTimeout(() => {
          var arr = []
          if (this.active !== 0) {
            arr = this.autorInfo
            // 判断本人是否关注此作者
            var islike = arr.findIndex(val => val.name === this.autorname) > -1
          } else {
            arr = this.autorlist
          }
          // flag用来防止二次渲染用户
          var flag = this.list.findIndex(val => {
            if (arr.length === 0) {
              return true
            }
            return arr.indexOf(val) > -1
          }) === -1
          if (flag && arr === this.autorInfo && islike) {
            this.list.push(this.userInfo)
          } else if (flag) {
            this.list.push(...arr)
          }
          for (let i = 0; i < 10; i++) {
            this.list.push(this.others)
          }
          // 加载状态结束
          this.loading = false
          this.isLoading = false
          // 数据全部加载完成
          if (this.list.length >= 40) {
            this.finished = true
          }
        }, 1000)
      } else {
        this.list = []
        setTimeout(() => {
          if (this.active === 1) {
            this.list.push(...this.autorInfo)
          } else {
            this.list.push(this.userInfo)
          }
          this.finished = true
          this.isLoading = false
          this.loading = false
        }, 1000)
      }
    },
    onRefresh () {
      this.onLoad()
    }
  }
}
</script>

<style scoped lang="less">
  .van-pull-refresh {
    height: 1000px;
  }
</style>
